<template>
  <div>
    <div id="monthChart" ref="lineChart" style="width:100%;height:37vh" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      data1: [],
      data2: [],
    }
  },
  props: {
    sumDataMonthTop15: {
      type: Array,
      default: function() {
        return []
      },
    },
  },
  mounted() {
    this.initChart()
  },
  components: {},

  watch: {
    sumDataMonthTop15: {
      handler() {
        this.initChart()
      },
      // immediate: true,
      deep: true,
    },
  },
  methods: {
    initChart() {
      const data1 = this.sumDataMonthTop15.map((item) => {
        return item.name
      })
      const data2 = this.sumDataMonthTop15.map((item) => {
        return item.累计故障
      })
      const myChart = this.$echarts.init(this.$refs.lineChart)
      const options = {
        title: {
          text: '当月故障TOP15',
          top: 15,
          left: 15,
          textStyle: {
            fontSize: 11,
            color: '#25b6e2',
            fontWeight: 'normal',
          },
        },
        grid: {
          top: 55,
          left: '3%',
          right: '3%',
          bottom: '3%',
          containLabel: true,
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999',
            },
          },
        },
        xAxis: [
          {
            type: 'category',
            data: data1,
            // 横坐标轴的名称颜色
            axisLabel: {
              color: '#aaa',
              interval: 0,
              rotate: 20,
              fontSize: 7,
            },
            axisPointer: {
              type: 'shadow',
            },
            //  横坐标轴颜色
            axisLine: {
              lineStyle: {
                color: '#042666',
              },
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            name: '',
            axisLabel: {
              formatter: '{value} ',
              color: '#aaa',
              fontSize: 8,
            },

            // 图表区域横向的线
            splitLine: {
              lineStyle: {
                color: '#042666',
              },
            },
          },
        ],
        series: [
          {
            name: '故障数',
            type: 'bar',
            label: {
              show: true,
              color: '#25b6e2',
              fontSize: 11,
              position: 'outside',
            },
            itemStyle: {
              color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#29ccfd' },
                { offset: 0.5, color: '#46acfe' },
                { offset: 1, color: '#6589ff' },
              ]),
            },
            tooltip: {
              valueFormatter: function(value) {
                return value + '个'
              },
            },
            data: data2,
          },
        ],
      }
      myChart.setOption(options)
    },
  },
}
</script>
